<template>
  <div>
    <view3d v-if="graphData" :graphData="graphData" :colors="colors" :types="types"></view3d>
  </div>
</template>

<script>
import {request} from '@/network/request'
import View3d from '@/components/View3d.vue'
  export default {
    name: 'threed',
    components: {
        View3d
    },
    data() {
        return {
            graphData: null,
            colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452'],
            types: ['贾家荣国府', '贾家宁国府', '王家', '史家', '薛家', '其他', '林家']
        }
    },
    methods: {
        async getGraphData(){
            const res = await request('/get_all_relation')
            this.graphData = res
            // console.log(typeof res);
            // 解析数据，生成专用数据
            this.graphData = this.parserData(this.graphData)
            // console.log(this.graphData);
        },
        parserData(data) {
            if (!data) return console.log('数据为空')
            // 为data数组里的每一个元素增加一个id
            const nodes = data.data
            nodes.forEach((item, index) => {
                item.id = index
            });
            const newValue = {
                nodes: nodes,
                links: data.links
            }
            return newValue
        },
        
    },
    mounted() {
        this.getGraphData()
    }
}
</script>

<style scoped>
  
</style>

